<!DOCTYPE html>
<html th:replace="~{layouts/layout :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>添加视频</title>
</head>
<section>
    <style>
        .form-control {
            background: #fafafa;
        }
    </style>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-8 shadow-sm p-3 mb-5 border rounded" style="background: #fff">
                <form id="form" action="/video/add" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="name">名称</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="视频名称">
                        <div class="invalid-feedback">
                            视频名称不能为空！
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description">描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3" placeholder="视频的各种信息"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="cover">封面</label>
                        <input type="file" class="form-control-file" id="coverFile">
                        <div class="valid-feedback">
                            封面文件上传成功！
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="filepath">文件路径</label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">/home/joe/Data/Videos/</span>
                            </div>
                            <input type="text" class="form-control" id="filepath" name="filepath" placeholder="在服务器上的路径">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="duration">时长</label>
                        <input type="text" class="form-control" id="duration" name="duration" placeholder="视频时长">
                    </div>
                    <div class="form-group">
                        <label for="size">大小</label>
                        <input type="text" class="form-control" id="size" name="size" placeholder="视频占用的空间">
                    </div>
                    <div class="form-group">
                        <label for="releaseDate">发布时间</label>
                        <input type="text" class="form-control" id="releaseDate" name="releaseDate" placeholder="格式: 2019-10-30">
                        <div class="invalid-feedback">
                            发布时间不合法！
                        </div>
                    </div>
                    <input type="text" hidden="hidden" name="cover" id="cover">
                    <button id="submitBtn" type="submit" class="btn btn-secondary">添 加</button>
                </form>
            </div>
        </div>
    </div>
    
    <script>
      function getBase64(file) {
        return new Promise(function(resolve, reject) {
          var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() { resolve(reader.result) };
            reader.onerror = function(error){ reject(error)};
        });
      }

      $('#coverFile').change(function(e) {
        getBase64(e.target.files[0]).then(function(data) {
          $('#cover').val(data);
          $('#coverFile').addClass("is-valid");
        });
      });

      $('#form').submit(function() {
        var nameNode = $('#name');
        var dateNode = $('#releaseDate');
        
        var status = true;
        if (!nameNode.val()) {
          nameNode.addClass('is-invalid');

          status = false;
        } 
        if (!dateNode.val() && !/\d\d\d\d-\d*-\d*/.test(dateNode.val())) {
          dateNode.addClass('is-invalid');

          status = false;
        } 
        if (status) {
          nameNode.removeClass('is-invalid');
          dateNode.removeClass('is-invalid');
        }
        
        return status;
      });
    </script>
</section>
</html>
